import React from 'react';
import * as echarts from 'echarts';
import '../../../App.scss'
import { useEffect } from 'react';
import {getHistorydata} from '../../../untils/api'
import { useState } from 'react';

// 基于准备好的dom，初始化echarts实例

function RealtimeData(props) {
    var [botlist,setbotlist] = useState([])
    var [data1,setdata1] = useState([])
    useEffect(()=>{
        getHistorydata().then((res)=>{
            res.data.list.series.forEach(item => {
                item['type']='bar'
                item['itemStyle']={
                    normal: {
                      label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: {
                          //数值样式
                          color: 'black',
                          fontSize: 12,
                        },
                      },
                    },
                }
            });
            setbotlist(res.data.list.series)
            setdata1(res.data.list.xAxis)
        })
    },[])
setTimeout(() => {
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
    tooltip: {},
    title: {
        text: '在线服务数据趋势',
        left:'center'
    },
    legend: {
        right:250
    },
    yAxis:{},
    xAxis: {
        type: 'category',
        axisLabel: {
            formatter: '{value} 日',
            align: 'center'
            // ...
          },
        data: data1
    },
    series: botlist
    });
},200);
    var boxlist = [
        {
            top:'正在咨询人数',
            middle:'0',
            bottom:'当前在线客服人数'
        },
        {
            top:'正在咨询人数',
            middle:'0',
            bottom:'当前在线客服人数'
        },
        {
            top:'正在咨询人数',
            middle:'0',
            bottom:'当前在线客服人数'
        },
        {
            top:'正在咨询人数',
            middle:'0',
            bottom:'当前在线客服人数'
        },
        {
            top:'正在咨询人数',
            middle:'0',
            bottom:'当前在线客服人数'
        },
    ]
    return (
        <div className='realttime'>
            <h2>实时数据</h2>
            <div className='realtbox'>
            {
                boxlist.map((item,index)=>{
                    return(
                            <div className='onerealtbox' key={index}>
                                <div className='realttop'>{item.top}</div>
                                <div className='realtmiddle'>{item.middle}</div>
                                <div className='realtbottom'>{item.bottom}</div>
                            </div>
                    )
                })
            }
            </div>
            <h2>今日在线服务数据趋势</h2>
            <div id="main" style={{height:400,width:1200}}></div>
        </div>
    );
}
export default RealtimeData;